<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{margin:0px; padding:0px;}
        /*div{
            width: 100px;
            height: 100px;}*/
        #div1{background-color: greenyellow; text-align: center;width: 100px;
            height: 100px;}
        #div2{background-color: wheat;text-align: center;width: 100px;
            height: 100px;}
        #div3{background-color: thistle;text-align: center;width: 100px;
            height: 100px;}
    </style>

    <script>
        /*var Box2=$('div2');
        var Box3=$('div3');*/
        window.onload=function ()          /* 文档就绪函数       当前文档加载完成之后，document才能长到element*/
        {

            /*document.getElementById("div1").style.width=200+'px';
            document.getElementById("div1").style.height=200+'px';*/

            /*   动态绑定函数（添加事件监听函数）   */
            /*鼠标点击以后才能实现*/
            document.getElementById("div1").addEventListener("click",function (){
                this.style.width=200+'px';
                this.style.height=200+'px';
            });
            /*鼠标离开后变为原状*/
            document.getElementById("div1").addEventListener("mouseout",function (){
                this.style.width=100+'px';
                this.style.height=100+'px';
            });
            /*document.getElementById("div2").addEventListener("click",function (){
                Box3.style.display."none";

                Box2.style.display."block";
            });
            document.getElementById("div3").addEventListener("click",function (){
                Box2.style.display."none";
                Box3.style.display."block";
            });*/
        }
        function btn1()
        {
            $("#div2").show();
            $("#div3").hide();
        }
        function btn2()
        {
            $("#div3").show();
            $("#div2").hide();
        }

    </script>
</head>
<body>
<div id="div1">--1--</div>
<div id="div2"><h>--2号--</h>点击隐藏3号 </div>
<div id="div3">3</div>
<button id="btn1" onclick="btn1()">隐藏3</button>
<button id="btn2" onclick="btn2()">隐藏2</button>
</body>
</html>